<template>
	<u-scroll-list
		@right="right"
		@left="left"
	>
		<view
			class="scroll-list"
			style="flex-direction: row;"
		>
			<view
				class="scroll-list__goods-item"
				v-for="(item, index) in list"
				:key="index"
				:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
			>
				<image
					class="scroll-list__goods-item__image"
					:src="item.thumb"
				/>
				<text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
			</view>
			<view class="scroll-list__show-more">
				<text class="scroll-list__show-more__text">查看更多</text>
				<u-icon
					name="arrow-leftward"
					color="#f56c6c"
					size="12"
				/>
			</view>
		</view>
	</u-scroll-list>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,

      // price: '230.5',
      // thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'

    }
  },
  data() {
    return {

    }
  },
  methods: {
    left() {
      console.log('left')
    },
    right() {
      console.log('right')
    }
  }
}
</script>

<style lang="scss">
.scroll-list {
	@include flex(column);

	&__goods-item {
		margin-right: 10px;
		background: rgb(245, 245, 245);
		padding: 15rpx;
		border-radius: 15rpx;

		&__image {
			width: 60px;
			height: 60px;
			border-radius: 4px;
		}

		&__text {
			color: #f56c6c;
			text-align: center;
			font-size: 12px;
			margin-top: 5px;
		}
	}

	&__show-more {
		background-color: #fff0f0;
		border-radius: 3px;
		padding: 3px 6px;
		@include flex(column);
		align-items: center;

		&__text {
			font-size: 12px;
			width: 12px;
			color: #f56c6c;
			line-height: 16px;
		}
	}
}
</style>
